
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>仿淘宝动态生成SKU表格实例(zxw)</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="js/goods/sku_style.css" />
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1805932_ysrcp4y0uy9.css">
    <link rel="stylesheet" href="css/uploadImg.css">
</head>
<body>

<div style="display: none;">
<ul class="SKU_TYPE"><li is_required='0' propid='3' sku-type-name="颜色"></li></ul>
<ul><li><label><input type="checkbox" class="sku_value" propvalid='31' value="土豪金" /></label></li></ul>
</div>

<!--<button class=""></button>-->
<button class="btn btn-info btn_query btn-round cloneSku">添加自定义sku属性</button>
<!--sku模板,用于克隆,生成自定义sku-->
<div id="skuCloneModel" style="display: none;">
    <div class="clear"></div>
    <ul class="SKU_TYPE">
        <li is_required='0' propid='' sku-type-name="">
            <a href="javascript:void(0);" class="delCusSkuType">移除</a>
            <input type="text" class="cusSkuTypeInput" placeholder="规格名称"/>：
        </li>
    </ul>
    <ul>
        <li>
            <input type="checkbox" class="model_sku_val" propvalid='' value="" />
            <input type="text" class="cusSkuValInput" placeholder="规格属性"/>
        </li>
        <button class="btn btn-info btn_query btn-round cloneSkuVal">添加自定义属性值</button>
    </ul>
    <div class="clear"></div>
</div>

<!--单个sku值克隆模板-->
<li style="display: none;" id="onlySkuValCloneModel">
    <input type="checkbox" class="model_sku_val" propvalid='' value="" />
    <input type="text" class="cusSkuValInput" />
    <a href="javascript:void(0);" class="delCusSkuVal">删除</a>
</li>
<div class="clear"></div>
<div id="batchEditSkuTable" style="display: none;">
    <table class="skuTable">
        <caption style="text-align: left;font-size: large">批量设置：</caption>
        <tbody>
            <tr>
                <th>图片</th><th>库存</th><th>库存1</th><th>库存2</th><th>库存4</th><th>库存4</th><th>操作</th>
            </tr>
            <tr propvalids="" propids="" propvalnames="" propnames="" class="sku_table_tr">
                <td><input type="file" name="files" accept="image/*"></td>
                <td><input type="text" class="setting_sku_price" value=""></td>
                <td><input type="text" class="setting_sku_stock" value=""></td>
                <td><input type="text" class="setting_sku_stock" value=""></td>
                <td><input type="text" class="setting_sku_stock" value=""></td>
                <td><input type="text" class="setting_sku_stock" value=""></td>
                <td><button id="watchPicture" class="btn btn-info btn_query btn-round">查看图片</button><button id="batchSet" class="btn btn-info btn_query btn-round">批量设置</button></td>
            </tr>
        </tbody>
    </table>
</div>
<div id="skuTable"></div>

</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/goods/createSkuTable.js"></script>
<script type="text/javascript" src="js/goods/customSku.js"></script>
<script type="text/javascript" src="js/goods/layer.js"></script>
<script type="text/javascript" src="js/goods/getSetSkuVals.js"></script>
<script type="text/javascript">

    //图片上传
    $("input[name=files]").on('change', function(e) {
        var imgSize = this.files[0].size;
        var fileList = this.files;

        for (var i = 0; i < fileList.length; i++) {
            var imgSrcI = getObjectURL(fileList[i]);
            $(this).attr("value", imgSrcI);
        }
    });


    //建立可存取到file的url
    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        }else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }

    $("#watchPicture").click(function () {
        window.open().document.write("<img src="+$(this).parent("td").siblings(":first").children("input").attr("value")+" />");
    })

</script>
</html>